/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, { useEffect, useState } from 'react';
import type {Node} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  Button,
  Linking,
  LoadingView,
  Image,
} from 'react-native';
import {Camera, useCameraDevices} from 'react-native-vision-camera'

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const Section = ({children, title}): Node => {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
};

const style = StyleSheet.create({
  box: {
    position: 'relative',
    height: 300
  },
  logo: {
    position: 'absolute',
    top: 100,
    left: 100,
    zIndex: 10000,
    width: 20,
    height: 20
  }
})

const Photo = () => {
  const devices = useCameraDevices()
  const device = devices.back
  console.log('device', devices)

  if (device == null) return <Text>loding</Text>;
  return (
    <View style={style.box}>
      <Camera style={StyleSheet.absoluteFill} device={device} isActive={true} />
      <Image
        style={style.logo}
        source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}
      />
    </View>
  )
}

const App: () => Node = () => {
  const isDarkMode = useColorScheme() === 'dark';
  const [cameraPermission, setCameraPermission] = useState()
  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  useEffect(() => {
    const init = async () => {
      const cameraPermission = await Camera.getCameraPermissionStatus();
      console.log('cameraPermission', cameraPermission)
      setCameraPermission(cameraPermission)
    };
    init();
  });

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <View>
       <Text>cameraPermission: {cameraPermission}</Text>
      </View>
      <View>
        <Button title="go setting" onPress={() => {
          console.log('onPress');
          Linking.openSettings();
        }} />
        <Button title="refresh" onPress={async () => {
          const cameraPermission = await Camera.getCameraPermissionStatus();
          console.log('cameraPermission', cameraPermission);
          setCameraPermission(cameraPermission);
        }} />
      </View>
      {cameraPermission === 'authorized' ? <Photo /> : null}
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;
